<template>
	<div class="year-progress">
		<progress percent="80" border-radius="0" activeColor="#EA5A49" active />
		<p>{{ year }}年已经过去了{{ offsetDays }}天，剩余{{ offsetPercent }}%</p>
		人丑务必多读书鸭~
	</div>
</template>	
<script>
	export default {
	  computed: {
	    year () {
	      return new Date().getFullYear()
	    },
	    offsetDays () {
	      // 今年一月一号
	      const start = new Date()
	      start.setMonth(0)
	      start.setDate(1)
	      const offset = new Date().getTime() - start.getTime()
	      return Math.ceil(offset / 1000 / 60 / 60 / 24)
	    },
	    offsetPercent () {
	      return (100 - ((this.offsetDays * 100 / this.getDaysOfYear()).toFixed(1))).toFixed(1)
	    }
	  },
	  methods: {
	    isLeapYear () {
	      const year = new Date().getFullYear()
	      if ((year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0)) {
	        return true
	      }
	      return false
	    },
	    getDaysOfYear () {
	      return this.isLeapYear ? 366 : 365
	    }
	  },
	  onshow () {
	    console.log('yearProgress onshow')
	  }
	}
</script>
<style lang='scss'>
.year-progress{
  text-align: center;
  margin-top:10px;
  margin-bottom:40px;
  width:100%;
  progress{
    margin-bottom: 10px;
  }
}
</style>